<script setup lang="ts">
import { NPagination } from "naive-ui"

const props = defineProps<{
  pageConfig: any
  handleChangePage: () => void
  pageTotal: number
}>()
const bodyWidth = document.body.clientWidth
// const
//页数改变
const changePage = () => {
  props.handleChangePage()
}
//页码改变
const changePageSize = () => {
  props.handleChangePage()
}
</script>

<template>
  <div class="pagination">
    <n-pagination :display-order="['pages', 'size-picker']" :page-count="100" show-size-picker
      v-model:page-size="props.pageConfig.pageSize" v-model:page="props.pageConfig.page" :page-sizes="[30, 50, 100]"
      v-on:update-page="changePage" v-on:update-page-size="changePageSize" :item-count="pageTotal"
      :page-slot="bodyWidth < 600 ? 5 : 10" />
  </div>
</template>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: right;
  margin-top: 20px;
  margin-right: 20px;

  @media screen and (max-width: 600px) {
    justify-content: left;
    width: 100%;
  }
}
</style>
